import React from 'react'
import {List} from "antd";
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';


interface IProps {

}

interface IState {
  listData: any[],
  testStr: string
}

class Index extends React.Component<IProps, IState> {

  state: IState = {
    listData: [
      {
        title: 'Secret Ant Design Title 1',
        description: 'var i=1'
      },
      {
        title: 'Secret Ant Design Title 2',
        description: 'var i=2;'
      },
      {
        title: 'Secret Ant Design Title 3',
        description: 'var i=3;'
      },
      {
        title: 'Secret Ant Design Title 4',
        description: 'var i=4'
      },
    ],
    testStr: 'var i=1;' +
      'console.log(i);'
  };

  componentDidMount(): void {
    // Prism.highlightAllUnder(this.state.testStr);
  }


  render() {
    return (
      <>
        <div dangerouslySetInnerHTML={{__html:Prism.highlight(this.state.testStr,Prism.languages.javascript, 'javascript')}}/>
        <List
          size="large"
          dataSource={this.state.listData}
          renderItem={(item) => {
            return (
              <List.Item actions={item.actions}>
                <List.Item.Meta title={item.title} description={Prism.highlight(item.description,Prism.languages.javascript, 'javascript')}/>
              </List.Item>
            );
          }}
        />
      </>
    );
  }
}

export default Index
